<template>
    <div class="friendsPrivilege">
        <div class="flex">
          <headerTou title="天天咖啡" :isfanhui=true url='home'></headerTou> 
            <car :data=data1  class="juzhong" :chongzhi=true  :url=Recharge ></car>  
            <div class="xiaofei" v-show="xiaofei==true" ><span @click='tiaozhuan'>消费记录</span><img src="../img/more.png" alt=""></div>
            <div class="ClickHeder">
                <span class="rborder " :class="{background:isliang==1}" @click="backgroundyan(1)" >我的特权</span>
                <span class="rborder"  :class="{background:isliang==2}"  @click="backgroundyan(2)" >亲友特权</span>
                <span  :class="{background:isliang==3}" @click="xiangqi" >店铺详情</span>
            </div> 
         </div>
         <div class="neirong" :style="{paddingTop:top}">
              <carque :data=data></carque>
                     <carque :data=data url="Details"></carque>
                      <carque :data=data></carque>
         </div>
         <div class="footflex">
          <div class="btn" @click='btn'>卖单</div>
         </div>
    </div>
</template>
<script>
import headerTou from "./zujian/header.vue";
import car from "./zujian/car.vue";
import carque from "./zujian/carque.vue";
export default {
  data() {
    return {
      top: "9.2rem",
      xiaofei: true,
      Recharge: "Recharge",
      data: {},
      data1: {
        src: "../img/logo@3x.png",
        biaoti: "冰火九重天洗车",
        qianshu: "5000",
        background:
          "background-image: linear-gradient(-94deg, #f2f1f1 0%, #bbb5b2 100%);"
      },
      isliang: 1
    };
  },
  created() {
    this.data = {
      src: "../img/logo@3x.png",
      title: "冰火九重天洗车",
      qianshu: "5000",
      cishu: 20
    };
  },
  mounted() {},
  methods: {
    xiangqi: function() {
      this.$router.push({ name: "ShopDetails" });
    },
    tiaozhuan: function() {
      this.$router.push({ name: "StoreConsumptionRecords" });
    },
    backgroundyan: function(i) {
      this.isliang = i;
      if (i == 2) {
        this.xiaofei = false;
        this.top = "8.4rem";
      } else {
        this.xiaofei = true;
        this.top = "9.2rem";
      }
    },
    btn:function(){
       this.$router.push({ name: "Payment" });
    }
  },
  //   watch: {
  //       data:function(newll){
  //           console.log(newll)
  //            console.log(111)
  //       }
  //   },
  components: {
    headerTou,
    car,
    carque
  }
};
</script>
<style lang="scss" scoped>
.friendsPrivilege {
  position: relative;
  height: 100%;
  .flex {
    position: fixed;
    width: 100%;
    z-index: 999;
    background: #ffffff;
    padding-bottom: 50px;
    .xiaofei {
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #666666;
      margin-bottom: 20px;
      margin-left: 45px;
      img {
        width: 28px;
        height: 28px;
        vertical-align: middle;
      }
    }
  }
  .juzhong {
    width: 660px;
    margin: 40px auto;
  }
  .ClickHeder {
    width: 600px;
    margin: 0 auto;
    height: 42px;
   
    display: flex;
    line-height: 42px;
    border: 1px solid rgba(233, 122, 54, 1);
    border-radius: 10px;
    span {
      font-size: 24px;
      width: 200px;
      text-align: center;
      color: rgba(233, 122, 54, 1);
    }
    .rborder {
      border-right: 1px solid rgba(233, 122, 54, 1);
    }
    .background {
      color: #ffffff;
      background: rgba(233, 122, 54, 1);
    }
  }
  .neirong {
    padding-bottom: 120px;
    .kapai {
      width: 696px;
      height: 196px;
      margin: 0 auto;
      background: url("img/Rectangle4@2x.png");
      background-size: 696px 196px;
      margin-top: 18px;
      position: relative;
      img {
        height: 108px;
        width: 108px;
        position: absolute;
        top: 38px;
        left: 46px;
        border: 1px solid #cccccc;
        border-radius: 8px;
      }
      .title {
        font-family: PingFangSC-Medium;
        font-size: 36px;
        color: #333333;
        position: absolute;
        top: 34px;
        left: 230px;
      }
      .qianshu {
        font-family: SFUIText-Medium;
        font-size: 48px;
        color: rgba(233, 122, 54, 1);
        font-weight: 800;
        position: absolute;
        bottom: 42px;
        left: 246px;
      }
      .cishu {
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #666666;
        position: absolute;
        top: 48px;
        right: 28px;
      }
    }
  }
  .footflex {
    width: 100%;
    height: 102px;
    background: #ffffff;
    line-height: 102px;
    position: fixed;
    bottom: 0;
    .btn {
      border-radius: 8px;
      background: #e97a36;
      width: 630px;
      height: 72px;
      font-family: PingFangSC-Regular;
      font-size: 36px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      line-height: 72px;
      margin: 0 auto;
      position: relative;
      top: 15px;
    }
  }
}
</style>

